<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="author" content="路志莹">
        <title>qq好友分组</title>
        <style>
        button{
            width: 100%;
        }
            .qq-ul{
                list-style: none;
                margin: 0;
                padding: 0;
            }
            .qq-list{
                background: #f00;
            }
            @keyframes show{
                0%{
                    transform: scale(0)
                }
                 50%{
                    transform: scale(0.5)
                }
                 100%{
                    transform: scale(1)
                }
            }
             @keyframes hide{
                0%{
                    transform:  rotate(0deg) scale(1)
                }
                 50%{
                   transform:   rotate(180deg) scale(0.6)
                }
                 100%{
                   transform:   rotate(360deg) scale(0)
                }
            }
            .fade-enter-active{
                animation: show 1s linear;
            }
            .fade-leave-active{
                 animation: hide 1s linear;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <com :qq='qq.friends' >
              
            </com>
            <com :qq='qq.family' >
            
            </com>
            <com :qq='qq.class' >
                
            </com>
        </div>
    <script src="js/vue.js">
        
    </script>
    <!--
        内联模板  
        模板中只有一个根标签
        且根标签不能有id
        因为模板要复用
    -->
    <script type='text/html' id="com">
    <div>
        <button @click='change'>{{qq.title}}</button>
        <!--
            动画效果
            会产生两个过渡类名
            enter-active   进入动画
            leave-active   离开动画
        -->
       <transition name='fade' appear>
            <ul class='qq-ul' v-show='isShow'>
            <li v-for='data in qq.data' class='qq-list'>{{data}}</li>
        </ul>
       </transition>
    </div>
    </script>
    <script>
    /*
    全局注册组件
    参数一：组件名
    参数二：配置对象
    必须写在vue对象之前，不然数据加载不出来
    */
    Vue.component('com',{
        template:'#com',
        props:['qq'],
        /*
        除根组件之外，其他组件的data
        必须是一个函数
        返回值必须是一个对象
        因为对象与数组是引用型数据，为了保证data数据的独立
        */
        data:function(){
            return{
                isShow:this.qq.isShow
            }
        },
        // 改变页面数据是否显示
        methods:{
            change(){
                this.isShow=!this.isShow
            }
        }
       
    })
    var app=new Vue({
        el:'#app',      //元素挂载点
        data:{          //页面数据
            qq:{
                friends:{
                    title:'朋友',
                    data:['李磊','韩梅梅','lzy','张三'],
                    isShow:false
                },
                family:{
                    title:'家人',
                    data:['mom','dad','brother','sister'],
                    isShow:false
                },
                class:{
                    title:'同学',
                    data:['李四','王五','赵六','vue'],
                    isShow:false
                }
            },
          
        },
        
    })
    </script>
    </body>
</html>